<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="hearder">
        <div class="w">
            <div class="topbar">
                <a href="#">小米官网</a>
                <span>|</span>
                <a href="#">小米商城</a>
                <span>|</span>
                <a href="#">MIUI</a>
                <span>|</span>
                <a href="#">IoT</a>
                <span>|</span>
                <a href="#">云服务</a>
                <span>|</span>
                <a href="#">天星数科</a>
                <span>|</span>
                <a href="#">有品</a>
                <span>|</span>
                <a href="#">小爱开放平台</a>
                <span>|</span>
                <a href="#">企业团购</a>
                <span>|</span>
                <a href="#">资质证照</a>
                <span>|</span>
                <a href="#">协议规则</a>
                <span>|</span>
                <a class="download" href="#">下载APP
                    <div class="downdown">
                        <img src="images/download.png" alt="">
                    </div>
                </a>
                <!-- <div class="appbox">
                    <p>666</p>
                </div> -->
                <span>|</span>
                <a href="#">Select Location</a>
                <span>|</span>
            </div>
            <div class="box fr">
                <a href="#">登录</a>
                <span>|</span>
                <a href="#">注册</a>
                <span>|</span>
                <a href="#">消息通知</a>
                <div class="char">
                    <a href="#">购物车（0）</a>
                    <div class="slidDown">
                        <p>购物车中还没有商品，快去选购吧！</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="headerNav">
        <div class="w clearfix">
            <a class="fl logo" href="">小米</a>
            <ul class="fl nav">
                <li> Xiaomi手机</li>
                <li> Redmi手机</li>
                <li> 电视</li>
                <li> 笔记本</li>
                <li> 平板</li>
                <li> 家电</li>
                <li> 路由器</li>
                <li> 服务中心</li>
                <li> 社区</li>
            </ul>
            <div class="fr search">
                <input type="text" value="耳机">
                <div class="btn"></div>
                <div class="lists">
                    <a href="">全部商品</a>
                    <a href="">红米</a>
                    <a href="">冰箱</a>
                    <a href="">电视</a>
                    <a href="">洗衣机</a>
                </div>
            </div>
        </div>

        <div class="header-nav-menu">
            <div class="w">
                <ul class="clearfix">
                    <li>
                        <div class="img"> <img src="./images/001.webp" alt=""> </div>
                        <h6>xiaomi 125 Ultra</h6>
                        <p>1999元</p>
                    </li>
                    <li>
                        <div class="img"> <img src="./images/001.webp" alt=""> </div>
                        <h6>xiaomi 125 Ultra</h6>
                        <p>1999元</p>
                    </li>
                    <li>
                        <div class="img"> <img src="./images/001.webp" alt=""> </div>
                        <h6>xiaomi 125 Ultra</h6>
                        <p>1999元</p>
                    </li>
                    <li>
                        <div class="img"> <img src="./images/001.webp" alt=""> </div>
                        <h6>xiaomi 125 Ultra</h6>
                        <p>1999元</p>
                    </li>
                    <li>
                        <div class="img"> <img src="./images/001.webp" alt=""> </div>
                        <h6>xiaomi 125 Ultra</h6>
                        <p>1999元</p>
                    </li>
                    <li>
                        <div class="img"> <img src="./images/001.webp" alt=""> </div>
                        <h6>xiaomi 125 Ultra</h6>
                        <p>1999元</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 轮播图 -->
    <div class="w wrapper clearfix">
        <div class="slide">
            <ul>
                <li>
                    <img src="images/06c044611f215ddef570d3a6a9a60725.webp" alt="">
                </li>
            </ul>
            <div class="btn0 lbtn"></div>
            <div class="btn0 rbtn"></div>
            <!-- 指示点 -->
            <ol class="oo">
                <li class="cona"></li>
                <li class="conb"></li>
                <li class="conb"></li>
                <li class="conb"></li>
            </ol>
            <div class="category">
                <div class="item">
                    <a href="">手机<i></i></a>
                    <div class="itemlist">
                        <ol class="clearfix">
                            <li>
                                <img src="images/001.webp" alt="">
                                Xiaomi 125
                            </li>
                            <li>
                                <img src="images/001.webp" alt="">
                                Xiaomi 125
                            </li>
                            <li>
                                <img src="images/001.webp" alt="">
                                Xiaomi 125
                            </li>
                            <li>
                                <img src="images/001.webp" alt="">
                                Xiaomi 125
                            </li>
                            <li>
                                <img src="images/001.webp" alt="">
                                Xiaomi 125
                            </li>
                            <li>
                                <img src="images/001.webp" alt="">
                                Xiaomi 125
                            </li>
                            <li>
                                <img src="images/001.webp" alt="">
                                Xiaomi 125
                            </li>

                            <li>
                                <img src="images/001.webp" alt="">
                                Xiaomi 125
                            </li>
                            <li>
                                <img src="images/001.webp" alt="">
                                Xiaomi 125
                            </li>
                            <li>
                                <img src="images/001.webp" alt="">
                                Xiaomi 125
                            </li>
                            <li>
                                <img src="images/001.webp" alt="">
                                Xiaomi 125
                            </li>
                            <li>
                                <img src="images/001.webp" alt="">
                                Xiaomi 125
                            </li>

                        </ol>
                    </div>
                    <a href="">电视<i></i></a>
                    <a href="">笔记本 平板<i></i></a>
                    <a href="">出行 穿戴<i></i></a>
                    <a href="">耳机 音箱<i></i></a>
                    <a href="">家电<i></i></a>
                    <a href="">智能 路由器<i></i></a>
                    <a href="">电源 配件<i></i></a>
                    <a href="">健康 儿童<i></i></a>
                    <a href="">生活 箱包<i></i></a>
                </div>
            </div>
        </div>

        <div class="rightbar">
            <div class="con1 item item1">
                <a href=""></a>
                <p>手机app</p>
            </div>
            <div class="con2 item item2">
                <a href=""></a>
                <p>个人中心</p>
            </div>
            <div class="con3 item item3">
                <a class="" href=""></a>
                <p>售后服务</p>
            </div>
            <div class="con4 item item4">
                <a href=""></a>
                <p>人工客服</p>
            </div>
            <div class="con5 item item5">
                <a href=""></a>
                <p>购物车</p>
            </div>

        </div>


    </div>


    <div class="home-hero w clearfix">
        <div class="span16 clearfix">
            <ul>
                <li><img src="images/ia1.png" alt="">
                    <p>保障服务</p>
                </li>
                <li><img src="images/ia2.png" alt="">
                    <p>企业团购</p>
                </li>
                <li><img src="images/ia3.png" alt="">
                    <p>F码通道</p>
                </li>
                <li><img src="images/ia4.png" alt="">
                    <p>米粉卡</p>
                </li>
                <li><img src="images/ia5.png" alt="">
                    <p>以旧换新</p>
                </li>
                <li><img src="images/ia6.png" alt="">
                    <p>话费充值</p>
                </li>
            </ul>
        </div>
        <div class="span17 clearfix">
            <ul class="clearfix">
                <li><img src="images/pic1.jpg" alt=""></li>
                <li><img src="images/pic2.jpg" alt=""></li>
                <li><img src="images/pic3.jpg" alt=""></li>
            </ul>
        </div>
    </div>



    <div class="home">
        <div class="home_banner_box w">
            <img src="images/广告.webp" alt="">
        </div>

        <div class="w">
            <div class="hd clearfix">
                <h1>家电</h1>
                <ul class="fr">
                    <li class="conn">热门</li>
                    <li class="conn">电视影音</li>
                </ul>
            </div>

            <div class="bd clearfix">
                <div class="fl">
                    <img class="bottom" src="images/tv6.webp" alt="">
                    <img src="images/wash.webp" alt="">
                </div>
                <div class="fr home_list">
                    <ul>
                        <li>
                            <div class="imgs">
                                <img src="images/tv70p.webp" alt="">
                            </div>
                            <h5>
                                小米电视6 65” OLED
                            </h5>
                            <p class="desc">OLED自发光屏幕 | 百万级对比度 | 4.6mm超薄全面屏</p>
                            <p class="price">
                                6699元
                                <del>6698元</del>
                            </p>
                        </li>
                        <li>
                            <div class="imgs">
                                <img src="images/tv70p.webp" alt="">
                            </div>
                            <h5>
                                小米电视6 65” OLED
                            </h5>
                            <p class="desc">OLED自发光屏幕 | 百万级对比度 | 4.6mm超薄全面屏</p>
                            <p class="price">
                                6699元
                                <del>6698元</del>
                            </p>
                        </li>
                        <li>
                            <div class="imgs">
                                <img src="images/tv70p.webp" alt="">
                            </div>
                            <h5>
                                小米电视6 65” OLED
                            </h5>
                            <p class="desc">OLED自发光屏幕 | 百万级对比度 | 4.6mm超薄全面屏</p>
                            <p class="price">
                                6699元
                                <del>6698元</del>
                            </p>
                        </li>
                        <li>
                            <div class="imgs">
                                <img src="images/tv70p.webp" alt="">
                            </div>
                            <h5>
                                小米电视6 65” OLED
                            </h5>
                            <p class="desc">OLED自发光屏幕 | 百万级对比度 | 4.6mm超薄全面屏</p>
                            <p class="price">
                                6699元
                                <del>6698元</del>
                            </p>
                        </li>
                        <li>
                            <div class="imgs">
                                <img src="images/tv70p.webp" alt="">
                            </div>
                            <h5>
                                小米电视6 65” OLED
                            </h5>
                            <p class="desc">OLED自发光屏幕 | 百万级对比度 | 4.6mm超薄全面屏</p>
                            <p class="price">
                                6699元
                                <del>6698元</del>
                            </p>
                        </li>
                        <li>
                            <div class="imgs">
                                <img src="images/tv70p.webp" alt="">
                            </div>
                            <h5>
                                小米电视6 65” OLED
                            </h5>
                            <p class="desc">OLED自发光屏幕 | 百万级对比度 | 4.6mm超薄全面屏</p>
                            <p class="price">
                                6699元
                                <del>6698元</del>
                            </p>
                        </li>
                        <li>
                            <div class="imgs">
                                <img src="images/tv70p.webp" alt="">
                            </div>
                            <h5>
                                小米电视6 65” OLED
                            </h5>
                            <p class="desc">OLED自发光屏幕 | 百万级对比度 | 4.6mm超薄全面屏</p>
                            <p class="price">
                                6699元
                                <del>6698元</del>
                            </p>
                        </li>
                        <li>
                            <div class="imgs">
                                <img src="images/tv70p.webp" alt="">
                            </div>
                            <h5>
                                小米电视6 65” OLED
                            </h5>
                            <p class="desc">OLED自发光屏幕 | 百万级对比度 | 4.6mm超薄全面屏</p>
                            <p class="price">
                                6699元
                                <del>6698元</del>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="home-s">
        <div class="w">
            <div class="hr clearfix">
                <h1>视频</h1>
                <ul class="fr">
                    <li class="conns">查看更多</li>
                </ul>
            </div>


            <div class="video clearfix">
                <ul>
                    <li>
                        <img src="images/video1.webp" alt="">
                        <p>2021年春季新品发布会第一场</p>
                    </li>
                    <li>
                        <img src="images/video2.webp" alt="">
                        <p>Redmi 10X系列发布会</p>
                    </li>
                    <li>
                        <img src="images/video3.webp" alt="">
                        <p>小米10 青春版 发布会
                        </p>
                    </li>
                    <li class="four">
                        <img src="images/video4.webp" alt="">
                        <p>小米10 8K手机拍大片</p>
                    </li>
                </ul>
            </div>
        </div>

        <div class="footer-service w">
            <ul class="clearfix">
                <li>
                    <i></i>预约维修服务
                </li>
                <li>
                    <i class="dv2"></i>7天无理由退货
                </li>
                <li>
                    <i class="dv3"></i>15天免费换货
                </li>
                <li>
                    <i class="dv4"></i>满69元包邮
                </li>
                <li>
                    <i class="dv5"></i>1100余家售后网点
                </li>
            </ul>
        </div>

        <div class="footer-list w clearfix">
            <div class="fl clearfix">
                <dl>
                    <dt></dt>
                </dl>
                <dl>
                    <dt>选购指南</dt>
                    <dd> 手机</dd>
                    <dd> 电视</dd>
                    <dd> 笔记本</dd>
                    <dd> 平板</dd>
                    <dd> 穿戴</dd>
                    <dd> 耳机</dd>
                    <dd> 家电</dd>
                    <dd> 路由器</dd>
                    <dd> 音箱</dd>
                    <dd> 配件</dd>
                </dl>
                <dl>
                    <dt>选购指南</dt>
                    <dd> 手机</dd>
                    <dd> 电视</dd>
                    <dd> 笔记本</dd>
                    <dd> 平板</dd>
                    <dd> 穿戴</dd>
                    <dd> 耳机</dd>
                    <dd> 家电</dd>
                    <dd> 路由器</dd>
                    <dd> 音箱</dd>
                    <dd> 配件</dd>
                </dl>
                <dl>
                    <dt>服务中心</dt>
                    <dd> 申请售后</dd>
                    <dd> 售后政策</dd>
                    <dd> 维修服务价格</dd>
                    <dd> 订单查询</dd>
                    <dd> 以旧换新</dd>
                    <dd> 保障服务</dd>
                    <dd> 防伪查询</dd>
                    <dd> F码通道</dd>
                </dl>
                <dl>
                    <dt>线下门店</dt>
                    <dd>小米之家</dd>
                    <dd>服务网点</dd>
                    <dd>授权体验店/专区</dd>
                </dl>

                <dl>
                    <dt>关注我们</dt>
                    <dd>新浪微博</dd>
                    <dd>官方微信</dd>
                    <dd>联系我们</dd>
                    <dd>公益基金会</dd>
                </dl>
            </div>
            <div class="fr">
                <strong>400-100-5678</strong>
                <p>8:00-18:00（仅收市电话）</p>
                <button>人工客服</button>
            </div>
        </div>

        <div class="footer-info">
            <div class="w clearfix">
                <div class="boxs">
                    <div class="logo">
                    </div>
                    <div class="info">
                        <a href="">小米商城 </a><span>|</span>
                        <a href="">MIUI </a><span>|</span>
                        <a href="">米家 </a><span>|</span>
                        <a href="">米聊 </a><span>|</span>
                        <a href="">多看 </a><span>|</span>
                        <a href="">游戏 </a><span>|</span>
                        <a href="">政企服务 </a><span>|</span>
                        <a href="">小米天猫店 </a><span>|</span>
                        <a href="">小米集团隐私政策</a><span>|</span>
                        <a href="">小米公司儿童信息保护规则</a><span>|</span>
                        <a href="">小米商城用户协议</a><span>|</span>
                        <a href="">问题反馈</a><span>|</span>
                        <a href="">Select Location</a>
                        <br>
                        <a href="">北京互联网法院法律服务工作站</a><span>|</span>
                        <a href="">中国消费者协会</a><span>|</span>
                        <a href="">北京市消费者协会</a>

                        <p>
                            &copy; <span>mi.com</span> 京ICP证110507号 <span>京ICP备10046444号</span>
                            <span>京公网安备11010802020134号</span>
                            京网文[2020]0276-042号
                            <br>
                            <span>（京）网械平台备字（2018）第00005号</span> <span>互联网药品信息服务资格证 (京)-非经营性-2014-0090</span>
                            <span>营业执照</span> <span>医疗器械质量公告</span>
                            <br>
                            <span>增值电信业务许可证</span> 网络食品经营备案 京食药网食备202010048 <span>食品经营许可证</span>
                            <br>
                            违法和不良信息举报电话：171-5104-4404 <span>知识产权侵权投诉</span> 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                        </p>
                        <div class="logolist">
                            <img src="images/truste.png" alt="">
                            <img src="images/v-logo-2.png" alt="">
                            <img src="images/icon3.png" alt="">
                            <img src="images/ba.png" alt="">
                            <img src="images/af.png" alt="">
                        </div>
                        <div class="mi"></div>
                    </div>
                </div>
            </div>
        </div>


</body>

</html>